<template>
  <el-container v-loading="loading">
    <el-tag
      :key="tag"
      v-for="tag in dynamicTags"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)">
      {{tag.name}}
    </el-tag>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue"
      ref="saveTagInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
  </el-container>
</template>

<script>
  export default {
    mounted: function () {
      let _this = this;
      this.api.getLabelTabulation().then(function (res) {
        if (res.code == 1) {
          _this.dynamicTags = res.data;
        }
        _this.loading = false;
      }).catch(function (error) {
        throw new Error(error);
      })
    },
    data() {
      return {
        loading: true,  // 页面加载
        dynamicTags: [
          {                //类型：Object  必有字段  备注：无                //类型：Number  必有字段  备注：id
            name: "帅气的"                //类型：String  必有字段  备注：名称
          },
          {                //类型：Object  必有字段  备注：无
            id: 2,                //类型：Number  必有字段  备注：id
            name: "帅气的"                //类型：String  必有字段  备注：名称
          },
        ],
        inputVisible: false,
        inputValue: ''
      };
    },
    methods: {
      handleClose(tag) {
        let _this = this;
        let _id = tag.id;
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.api.delLabel({id: _id}).then(function (res) {
            _this.dynamicTags.splice(_this.dynamicTags.indexOf(tag), 1);
            if(res.code == 1){
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            }else{
              _this.$message({
                showClose: true,
                message:res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        });
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let _this = this;
        let inputValue = this.inputValue;
        if (inputValue) {
          _this.api.insertLabel({name:inputValue}).then(function (res) {
            if (res.code == 1) {
              _this.dynamicTags.push(res.data);
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          });
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
  }
</script>

<style scoped>
  .el-container {
    display: block;
    width: 98% !important;
    margin: 15px auto;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
    margin-bottom: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    margin-bottom: 10px;
    vertical-align: bottom;
  }
</style>
